<template>
  <div>
    <div v-if="showslider" style="margin-bottom:10px;" class="mui-slider">
      <div class="mui-slider-group mui-slider-loop">
        <div class="mui-slider-item mui-slider-item-duplicate">
          <a href="#">
            <img :src="lastpic" />
          </a>
        </div>
        <div v-for="(item, index) in slideList" :key="index" class="mui-slider-item">
          <a href="#">
            <img :src="item.lunbotuimg" />
          </a>
        </div>
        <div class="mui-slider-item mui-slider-item-duplicate">
          <a href="#">
            <img :src="firstpic" />
          </a>
        </div>
      </div>
      <div class="mui-slider-indicator">
        <div
          v-for="(item2, index2) in slideList"
          :key="index2"
          :class="index2==0 ? 'mui-active' : '' "
          class="mui-indicator"
        />
      </div>
    </div>
    <div v-for="(item, index) in cardList" :key="index">
      <p class="typep">{{ item.code }}</p>
      <div class="cardcontent">
        <div v-for="(item2, index2) in item.item" :key="index2" class="imgcontent">
          <div class="mui-slider-img">
            <img :src="item2.imagepath" class="imgcard" @click="goSecond(item2)" />
          </div>
          <div style="position: relative">
            <p>{{ item2.itemname }}</p>
            <p style="color:rgb(0, 178, 163)">￥{{ item2.price }}</p>
            <img
              v-if="item2.itemtype=='2'"
              src="images/gouwuchetwo.png"
              @click="gocard(item2)"
              class="mui-img2"
            />
            <!-- <img v-else src="images/xiangqingtwo.png" @click="gocard(item2)" class="mui-img2" /> -->
          </div>
        </div>
        <div style="clear:both" />
      </div>
    </div>
    <div style="background:#fff;clear:both;height:50px;" />
    <mfooter v-if="istruefotter"></mfooter>
  </div>
</template>

<script>
import mfooter from '~/components/common/mfooter.vue'
export default {
  layout: 'default3',
  components: {
    mfooter
  },
  data() {
    return {
      ts: this.newStore(),
      slideList: [],
      cardList: [],
      lastpic: '',
      firstpic: '',
      showslider: false,
      istruefotter: true
    }
  },
  created() {
    this.gethomeData()
  },
  methods: {
    //组件刷新
    reload() {
      this.istruefotter = false
      this.$nextTick(() => (this.istruefotter = true))
    },
    gethomeData() {
      this.cardList = []
      this.slideList = []
      this.spost(this.ts, '/about/index').then(ts => {
        console.log(ts.d)
        this.slideList = ts.d.data.banner
        let lastpic = this.slideList[this.slideList.length - 1].img
        let firstpic = this.slideList[0].img
        this.cardList = ts.d.data.sys
        this.showslider = true
        setTimeout(() => {
          var gallery = mui('.mui-slider')
          gallery.slider({
            interval: 3000 //自动轮播周期，若为0则不自动播放，默认为0；
          })
        }, 50)
      })
    },
    goSecond(item) {
      console.log(item)

      this.$router.push({
        name: 'carddetail',
        query: {
          from: '首页',
          word: item.itemname,
          cardid: item.itemno,
          type: item.itemtype
        }
      })
    },

    cardList() {
      const res = {
        token: localStorage.getItem('token')
      }
      this.spost(this.ts, '/Carc/carList').then(ts => {
        if (ts.d.flag == '200') {
          this.$root.env.cardlength = ts.d.data.length
          mui.toast('加入购物车成功！', { duration: '500', type: 'div' })
        }
      })
    },
    //添加购物车
    gocard(item2) {
      console.log(item2, '2')

      const res = {
        token: localStorage.getItem('token'),
        specsid: item2.specsid
      }
      this.spost(this.ts, '/Carc/addCar', res).then(ts => {
        if (ts.d.flag == '200') {
          const res1 = {
            token: localStorage.getItem('token')
          }
          this.spost(this.ts, '/Carc/carList', res1).then(ts => {
            if (ts.d.flag == '200') {
              this.reload()
              this.$root.env.cardlength = ts.d.data.length
              console.log(this.$root.env.cardlength, '1111')

              mui.toast('加入购物车成功！', { duration: '500', type: 'div' })
            }
          })
          console.log(this.env.cardlength, '8989')

          return
        } else {
          mui.toast(ts.d.message)
        }
      })
    }
  }
}
</script>

<style>
.mui-img2 {
  position: absolute;
  top: 20px;
  right: 0px;
  width: 20px;
  height: 20px;
}
.mui-slider-img {
  position: relative;
  width: 155px;
  height: 170px;
  margin: 0 auto;
}
.imgcontent {
  width: 47%;
  float: left;
  border: 1px solid #ddd;
  padding: 10px;
  margin: 1.5%;
  border-radius: 4px;
}
.zxp {
  line-height: 30px;
}
.cardcontent p {
  /* text-align: center; */
  line-height: 20px;
  margin-bottom: 0px;
  /* padding-left: 15px; */
  margin: 0 auto;
  width: 170px;
}
.typep {
  font-weight: bold;
  text-align: center;
  padding: 14px 0;
  color: #333;
  margin:0;
  font-size: 20px;
}
.imgcard {
  /* display: block;
  margin: 0 auto; */
  width: 100%;
}
</style>
